<template>
    <div id="clock-box">
            <div id="clock-time" ref="time">00:00:00</div>
            <div id="clock-date" ref="date">xxxx年xx月xx日</div>
        </div>
</template>

<script>
    export default {
        name:"TimeCount",
        data(){
            return {
                date: new Date(),
                timer: null,
            }
        },
        methods: {
            showTime() {
                var year = this.date.getFullYear();
                var month = this.date.getMonth() + 1;
                var day = this.date.getDate();

                var hour = this.date.getHours();
                var minute = this.date.getMinutes();
                var second = this.date.getSeconds();

                var beauty = this.beauty;

                this.$refs.time.innerHTML = `${beauty(hour)}:${beauty(minute)}:${beauty(second)}`;
                this.$refs.date.innerHTML = `${year}年${beauty(month)}月${beauty(day)}日`;
            },
            beauty(num) {
                return num < 10 ? "0" + num : num;
            }
        },
        mounted() {
            this.showTime();
            this.timer = setInterval(this.showTime, 1000);
        },
        beforeDestroy(){
            clearInterval(this.timer);
        }
    }
</script>

<style  scoped>
    #clock-box {
        /* 父元素宽度依靠子内容撑开 */
        /* display:linne-block  -> 改变元素性质 */
        width: fit-content;
        margin: 0 auto;
        text-align: center;
        padding: 10px;
    }

    #clock-box #clock-time {
        font-size: 40px;
        line-height: 50px;
        font-family: "clockIcon";
    }

    @font-face {
        font-family: "clockIcon";
        src: url('@/assets/font/clockicons.woff2');
    }
</style>